<style>
    .height_full {
        height: 100%;
    }

    .detail_header {
        height: 200px;
        padding: 20px;
        border: 1px solid #eaeef1;
    }

    .detail_header_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .detail_header_title {
        height: 50px;
        padding: 5px;
        font-size: 30px;
        color: #3d464d;
    }

    .detail_header_types {
        height: 50px;
        padding: 5px
    }

    .detail_header_desc {
        height: 110px;
        padding: 5px
    }

    .detail_info {
        height: 250px;
        padding: 20px 30px;
        border-left: 1px solid #eaeef1;
        border-right: 1px solid #eaeef1;
    }

    .detail_style {
        height: 350px;
        padding: 20px 30px;
        border-left: 1px solid #eaeef1;
        border-right: 1px solid #eaeef1;
    }

    .detail_content {
        padding: 20px 30px;
        border-left: 1px solid #eaeef1;
        border-right: 1px solid #eaeef1;
        border-bottom: 1px solid #eaeef1;
    }
</style>

<div class="layuimini-container">
    <div class="layuimini-main" id="app">
        <div id="detail" style="padding: 20px;">
            <div class="layui-row">
                <div class="layui-col-md12 detail_header">
                    <div class="layui-row height_full">
                        <div class="layui-col-md12 height_full">
                            <div class="layui-row">
                                <div class="layui-col-md10 detail_header_title">
                                    {$detail.title}
                                </div>
                                <div class="layui-col-md2 detail_header_types">
                                    {if($detail['type'] === 'member_system')}
                                    <span class='layui-badge' style="margin-left: 2px;">系统插件</span>
                                    {else}
                                    <span class='layui-badge' style="margin-left: 2px;">应用插件</span>
                                    {/if}
                                </div>
                                <div class="layui-col-md12 detail_header_desc">
                                    {$detail.description}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12 detail_info">
                    <div class="layui-row height_full">
                        <div class="layui-col-md10 height_full">
                            <blockquote class="layui-elem-quote">{$detail.title} 应用信息</blockquote>
                            <div style="line-height: 28px">
                                <p><label class="layui-word-aux">开通价格：</label>￥<span style="font-size: 20px">{$detail.price}</span>
                                </p>
                                <p><label class="layui-word-aux">当前版本：</label>{$detail.version}</p>
                                <p><label class="layui-word-aux">更新时间：</label>{$detail.update_time | date="Y-m-d"}</p>
                                <p><label class="layui-word-aux">立即购买：</label>
                                    {if(!$has_buy)}
                                    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm plugin-buy"
                                            data-plugin-id="{$detail.id}">
                                        <i class="layui-icon layui-icon-cart"></i>立即购买
                                    </button>
                                    {else}
                                    <button type="button" class="layui-btn layui-btn-disabled">
                                        <i class="layui-icon layui-icon-cart"></i>已购买
                                    </button>
                                    {/if}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>